<template>
  <nav class="navbar-com snavbar">
    <van-nav-bar :style="{background:bg,color}" :border="false" :title="title" left-arrow @click-left="$router.back(-1)">
      <template #right>
        <div class="right-item v-c">
          <slot></slot>
          <router-link v-if="showHome" to="/home">首页</router-link>
        </div>
      </template>
    </van-nav-bar>
  </nav>
</template>

<script>
export default {
  props:{
    title:{
      type:String
    },
    showHome:{
      type:Boolean,
      default:true
    },
    bg:{
      type:String,
      default:'#f16e44'
    },
    color:{
      type:String,
      default:'#fff'
    }
  }
}
</script>

<style>
  .van-nav-bar{
    height: 50PX;
    /* background: #f16e44; */
  }
  .van-nav-bar .van-icon,.van-nav-bar__title,.van-nav-bar a{
    color: inherit;
  }
  .van-nav-bar a{
    font-size: 16PX;
  }
  .van-nav-bar__title{
    font-size: 18PX;
  }
  .van-nav-bar__left:active, .van-nav-bar__right:active{
    opacity: 1;
  }
  .snavbar{
    z-index: 9999;
  }
  .snavbar .van-icon{
    font-size: 20PX;
  }
  .right-item>*{
    margin-left: 15px;
  }
</style>